<div class="row">
  <div class="col-lg-4">
    <div class="card" role="button" routerLink="/metadata">
      <div class="card-body">
        <h5 class="card-title">
          Device Services
          <!-- <span class="float-right badge badge-danger">Enabled 5</span>
          <span class="float-right badge badge-success mr-2">Disabled 5</span> -->
        </h5>
        <h5 class="d-inline">
          <span class="badge badge-info"> {{deviceSvcCount > 20 ? '20+' : deviceSvcCount}} </span>
          <span class="float-right badge badge-danger">Locked {{deviceSvcStatusLocked}}</span>
          <span class="float-right badge badge-success mr-2">Unlocked {{deviceSvcCount - deviceSvcStatusLocked}}</span>
        </h5>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card" role="button" routerLink="/metadata/device-center">
      <div class="card-body">
        <h5 class="card-title">Devices</h5>
        <h5 class="d-inline">
          <span class="badge badge-info"> {{deviceCount > 20 ? '20+' : deviceCount}} </span>
          <span class="float-right badge badge-danger">Locked {{deviceStatusLocked}}</span>
          <span class="float-right badge badge-success mr-2">Unlocked {{deviceCount - deviceStatusLocked}}</span>
        </h5>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card" role="button" routerLink="/metadata/device-profile-center">
      <div class="card-body">
        <h5 class="card-title">Device Profiles</h5>
        <h5 class="d-inline"><span class="badge badge-info">{{deviceProfileCount > 20 ? '20+' : deviceProfileCount}}</span></h5>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col-lg-6">
    <div class="card" role="button" routerLink="/scheduler">
      <div class="card-body">
        <h5 class="card-title">Schedulers</h5>
        <h5><a href="#" class="card-link font-weight-bolder badge badge-info">{{schedulerCount > 20 ? '20+' : schedulerCount}}</a></h5>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card" role="button" routerLink="/notifications">
      <div class="card-body">
        <h5 class="card-title">Notifications</h5>
        <h5><a href="#" class="card-link font-weight-bolder badge badge-info">{{notiCount > 20 ? '20+' : notiCount}}</a></h5>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col-lg-6">
    <div class="card" role="button" routerLink="/core-data">
      <div class="card-body">
        <h5 class="card-title">Events</h5>
        <h5><a href="#" class="card-link font-weight-bolder badge badge-info">{{eventCount}}</a></h5>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card" role="button" routerLink="/core-data">
      <div class="card-body">
        <h5 class="card-title">Readings</h5>
        <h5><a href="#" class="card-link font-weight-bolder badge badge-info">{{readingCount}}</a></h5>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col-md-12">
    <div class="card" role="button" routerLink="/system-agent">
      <div class="card-body">
        <h5 class="card-title">System Services Monitor</h5>
        <h5>
          <span class="badge badge-info">7</span>
          <!-- <span class="badge badge-danger float-right">Down 0</span>
          <span class="badge badge-success float-right mr-2">Up 10</span> -->
        </h5>
      </div>
    </div>
  </div>
</div>



